
import './App.css';
import React from 'react';
// import Home from './views/Home';//主页
// import AllGoods from './views/AllGoods';//全部商品
import Classification from './views/Classification';//分类
// import WorthBuying from "./views/WorthBuying";//值得购买页
// import Login from './views/Login';//登录页
// import Regist from "./views/Regist"//注册页
// import Search from "./views/Search"//搜索页


// ------------------------------------------------------------------------------
// 一，函数式组件, 不需要任何继承, 没有this, 打印出来是undefined, 不能定义组件的状态和生命周期, 只能渲染元素
// 二，class组件，需要继承自React.Component, 里面有this, 指的是当前组件的实例化对象, 有组件状态和生命周期函数, 其中render方法负责组件的渲染(只要当前组件渲染一次, render就会执行一次),
//   渲染根组件的部分有严格模式, 会让我们及时的发现问题, 每执行一次就会打印一次
// 三，React.createClass（）（但是已经不能用了）
// ---------------------------------方式一--------------------------------------------------
// function App() {
//   return (//return在这里有自动分号特性，如果后面的整体不加一个圆括号就会出错
//     <div className='App'>
//       <h1>你好</h1>
//     </div>
//   );
// }
// export default App;
// -----------------------------------方式二-------------------------------------
// class组件内部的this,表示当前组件实例对象
class App extends React.Component {

  render() { //负责组件的渲染( 只要当前组件渲染一次, render方法必定会调用一次 )
    //console.log(this);//他会打印两次，原因是在index.js中有一个严格模式，可以放大错误
    return (
      <div className="App">
        {/* 主页 */}
        {/* <Home></Home> */}

        {/* 分类页 */}
        <Classification></Classification>

        {/* 全部商品页 */}
        {/* <AllGoods></AllGoods> */}

        {/* 值得买 */}
        {/* <WorthBuying></WorthBuying> */}

        {/* 登录页 */}
        {/* <Login></Login> */}

        {/* 注册页 */}
        {/* <Regist></Regist> */}

        {/* 搜索页 */}
        {/* <Search></Search> */}
      </div>
    );
  }
}

export default App;

